<!-- 登录 -->
<template>
  <div>
    <head-nav></head-nav>
    <!-- 占位 -->
    <div class="zanwei-top"></div>
    <div class="registerinput">
      <ul>
        <li>
          <mt-field v-model="userlist.phone" label="手机号" placeholder="请输入手机号" type="tel">
          </mt-field>
        </li>
        <li>
          <mt-field v-model="userlist.pwd" label="密码" placeholder="请输入密码" type="password">
          </mt-field>
        </li>

      </ul>

      <!-- <div class="line20"></div> -->
      <ul>
        <!-- <li class="yhxy">
          注册成功即视为同意
          <router-link :to="'agreement'"> 用户注册协议</router-link>
        </li> -->
        <li class="zcbtn">
          <mt-button type="primary" size="large" @click.native="handleClick">登录</mt-button>
        </li>
      </ul>

    </div>

  </div>
</template>

<script>
import Vue from "vue";
import api from "../../api/api.js";
import { MessageBox, Toast } from "mint-ui";

export default {
  data() {
    return {
      disabled: false,
      userlist: {
        phone: "",
        pwd: ""
      }
    };
  },
  methods: {
    handleClick() {
      var that = this;
      if (this.phone == "") {
        this.Toastfn("请输入您的手机号", 2000);
      } else if (this.userlist.phone.length != 11) {
        this.Toastfn("请输入正确的手机号", 2000);
      } else if (this.userlist.pwd == "") {
        this.Toastfn("请输入密码", 2000);
      }  else {
        let fromdata = {
          userid: this.userlist.phone,
          pwd: this.userlist.pwd
        };
        api.userLogin(this, fromdata, function(res) {
          let data = res.data;
          if (data.code == 0) {
            this.$router.push({ path: "/wallet" });
          } else if (data.code != 0) {
            that.Toastfn("用户名或密码错误！", 2000);

          }
        });
      }
    },

    // 提示函数
    Toastfn(message, duration, position) {
      Toast({
        message: message,
        duration: duration,
        position: position
      });
    }
  }
};
</script>

<style scoped lang="less">
.registerinput {
  padding-top: 0.2rem;
  ul:first-child {
    padding-bottom: 0.2rem;
  }
  .yhxy {
    padding: 0.25rem;
    display: flex;
    align-items: center;
    font-size: 0.28rem;
    a {
      color: #F05DC4;
    }
  }
  .yzm {
    display: flex;
    align-items: center;
    .mint-button--primary {
      width: 150px;
      margin-right: 0.2rem;
      background-color: #00b050;
      color: #ffffff;
    }
  }
  .zcbtn {
    padding: 0.2rem;
  }
}

// 新增区域css样式
.perfectinput {
  > ul:first-child {
    padding-bottom: 0.2rem;
  }
  .yhxy {
    padding: 0.25rem;
    display: flex;
    align-items: center;
    font-size: 0.28rem;
    a {
      color: #F05DC4;
    }
  }

  .zcbtn {
    padding: 0.2rem;
  }
}

.hyts {
  text-align: center;
  padding-top: 0.7rem;
  padding-bottom: 0.5rem;
  .hynh {
    font-size: 0.4rem;
    color: #F05DC4;
    font-weight: bold;
    padding-bottom: 0.2rem;
  }
  .tswz {
    font-size: 0.24rem;
  }
}
</style>